<template>
  <sub-page>
    <q-toolbar-title slot="title">实名认证</q-toolbar-title>
    <q-btn flat dense icon="check" slot="more" @click="confirm" />
    <q-page slot="content">
      <p>
        <q-input filled v-model="name" label="姓名" />
      </p>
      <div>
        <q-input filled v-model="idNumber" label="身份证号" />
      </div>
      <div>
        添加身份证(正反面)照片:
        <image-preview
          :maxCount="max"
          @onAddImage="onAddImage"
          @onDeleteImage="onDeleteImage"
          ref="imgPreview"
        />
      </div>
      <div v-if="errMsg !== ''">{{ errMsg }}</div>
      <q-dialog v-model="alert">
        <q-card>
          <q-card-section>
            <div class="text-h6">提示</div>
          </q-card-section>

          <q-card-section class="q-pt-none">
            身份信息更新成功,正在审核之中!
          </q-card-section>

          <q-card-actions align="right">
            <q-btn
              flat
              label="确认"
              color="primary"
              v-close-popup
              @click="goback"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </q-page>
  </sub-page>
</template>

<script>
import SubPage from "@/components/SubPage";
import ImagePreview from "@/components/ImagePreview";

export default {
  components: {
    SubPage: SubPage,
    ImagePreview: ImagePreview,
  },
  data() {
    return {
      errMsg:"",
      alert: false,
      max: 2,
      name: "",
      idNumber: "",
      frontPhoto: "",
      backPhoto: "",
      options: ["男", "女"],
    };
  },
  methods: {
    async onAddImage(e) {
      console.log(e);
      if (!this.frontPhoto) {
        const response = await this.$account.uploadImg(e);
        if (response.data.status === false) {
          return;
        }
        this.frontPhoto = response.data;
        console.log(this.frontPhoto);
      } else {
        const response = await this.$account.uploadImg(e);
        this.backPhoto = response.data;
        console.log(this.backPhoto);
      }
    },
    async onDeleteImage(e) {
      console.log(e);
      let delUrl = "";
      if (e.position === 0) {
        delUrl = this.frontPhoto;
        console.log(delUrl);
        this.frontPhoto = null;
      } else {
        delUrl = this.backPhoto;
        console.log(delUrl);
        this.backPhoto = null;
      }
      console.log(delUrl);
      let res = await this.$account.delImg(delUrl);
      console.log(res.data);
    },
    async confirm() {
      try {
        if (!/^\d{18}$/.test(this.idNumber)) {
          this.errMsg = "错误:身份证信息错误!";
          return;
        }

        if (!/^.{2,30}$/.test(this.name)) {
          this.errMsg = "错误:请检查姓名!";
          return;
        }

        let res = await this.$account.certification(
          this.name,
          this.idNumber,
          this.frontPhoto,
          this.backPhoto
        );
        if (res.data.status === false) {
          this.errMsg = res.data.message;
          return;
        }
        // this.$store.commit("updateAccount", newAccount);
        this.alert = true;
      } catch (err) {
        console.log(err);
      }
    },
    goback() {
      this.$router.go(-1);
    },
  },
  mounted: function () {},
};
</script>

<style scoped>
.file {
  border: 1px dashed #3fcc8e;
  display: inline-block;
  overflow: hidden;
  line-height: 88px;
  text-align: center;
  height: 100px;
  width: 75px;
  background: #eeeeee;
}
.img {
  border: 1px dashed #3fcc8e;
  display: block;
  overflow: hidden;
  line-height: 88px;
  text-align: center;
  height: 100px;
  width: 75px;
  background: #eeeeee;
}
.file:hover {
  background: white;
}

.opt {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}

.van-hairline--bottom {
  height: 60px;
  line-height: 60px;
}

.inputPhoto {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
</style>